<template>
  <div id="car_botton_bar">
    <ul>
      <li @click="quanXuan()">
        <input type="checkbox" :checked="isSelectAll">全选
      </li>
      <li>合计：￥{{totalPrice}}</li>
      <li>去计算({{totalCount}})</li>
    </ul>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name: "CarBottonBar",
  props:{
  },
  data(){
    return{
      QXIndex:false
    }
  },
  methods:{
    quanXuan(){
     // this.QXIndex=!this.QXIndex;
     // this.$store.dispatch('checkTrue',this.QXIndex);
      if (this.isSelectAll){//如果全部选中
        this.getCartList.forEach((item)=>{
            item.checked=false;
        })
      }else{
        this.getCartList.forEach((item)=>{//如果未全部选中
          item.checked=true;
        })
      }
    }
  },
  computed:{
    ...mapGetters([//使用对象展开运算符,将getter混入到computed对象中
      "getCartLength",
      "getCartList"
    ]),
    totalPrice(){//获取被选中商品的总价格
      return this.$store.state.cartList.filter((item)=>{//将被选中的返回成一个新的数组
          return item.checked
      }).reduce((preValue,item)=>{//将filter返回的数组进行汇总,preValue是前一次的值
        return preValue + item.realPrice * item.count;
      },0).toFixed(2);//保留2为小数
    },
    totalCount(){//获取被选中商品的个数
      return this.$store.state.cartList.filter((item)=>{//将被选中的返回成一个新的数组
        return item.checked
      }).reduce((preValue,item)=>{
          return preValue+item.count;
      },0)
    },
    isSelectAll(){//全选和非全选
      /**
       * 我们来分析一下 下面的代码
       * this.getCartList.find(item=>!item.checked)
       * 该方法会从购物车列表中寻找没有被选中的商品
       * 当购物车列表中没有了未被选中的商品,那么这个时候就会返回 undefine
       * 取反即真,
       * !item.checked 会自动寻找 未选中的商品
       * 但是当购物车的商品全部选择后, find 就会找不到, 返回 undefine
       * 我们取反即真.
       *
       * 当然,我们可以去判断 已经选中的商品的个数,和购物车商品的个数进行比较
       *
       */
      if (this.getCartList.length===0) {
        return false
      }
      return !this.getCartList.find(item=>!item.checked)
    }
  }
}
</script>

<style scoped>
#car_botton_bar{
  position: fixed;
  width: 100%;
  height: 30px;
  bottom: 50px;
  background: #eba83a;
  line-height: 30px;
}
#car_botton_bar ul{
  display: flex;
}
#car_botton_bar ul li{
  flex: 1;
  text-align: center;
}
#car_botton_bar ul li:nth-of-type(2){
  text-align: left;
}
#car_botton_bar ul li:nth-of-type(3){
  text-align: center;
  background: #bb371a;
  padding-right: 10px;
  font-size: 19px;
}
</style>
